<template>
  <div style="background-color: white; width: 100%; height: 100%">
    <el-button
      link
      @click="router.push('/ProducManagement/ProcessRouteQuery')"
      style="margin-left: 10px"
      >‹返回</el-button
    >
    &nbsp;
    <span>|</span>
    &nbsp;
    <span style="font-size: 17px; font-weight: 700">工艺路线()</span>
    <hr style="background-color: #d3d3d3; height: 1px; border: none" />
    <el-form
      :inline="true"
      ref="ruleFormRef"
      style="max-width: 1000px; margin-left: 180px; margin-top: 30px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="工艺编码" prop="processRouteNo">
        <el-input v-model="ruleForm.processRouteNo" :readonly="isno" />
      </el-form-item>
      <el-form-item label="工艺名称" prop="processRouteName">
        <el-input v-model="ruleForm.processRouteName" />
      </el-form-item>
      <el-form-item label="工艺版本" prop="processVersion">
        <el-input v-model="ruleForm.processVersion" />
      </el-form-item>
      <el-form-item label="工艺描述" prop="processDescription">
        <el-input v-model="ruleForm.processDescription" />
      </el-form-item>
      <el-form-item label="物料" prop="inventoryInfoId" style="width: 200px">
        <el-select v-model="ruleForm.inventoryInfoId" placeholder="请选择物料">
          <el-option
            v-for="item in ItemInfoList"
            :label="item.itemName"
            :value="item.inventoryInfoId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="processRouteStatus" style="width: 200px">
        <el-select
          v-model="ruleForm.processRouteStatus"
          placeholder="请选择状态"
        >
          <el-option label="有效" :value="false" />
          <el-option label="无效" :value="true" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="GetAdd"> 保存 </el-button>
        <el-button
          style="margin-top: 20px; width: 80px"
          v-show="isshow"
          @click="AddProcessRoute"
          >{{ Wenzi }}</el-button
        >
      </el-form-item>
    </el-form>

    <h3
      style="
        margin-top: 150px;
        margin-bottom: 40px;
        color: #409eff;
        font-size: 20px;
      "
    >
      工序行
    </h3>
   
      <el-tabs type="border-card" >
        <el-tab-pane label="行信息">
          <div style="background-color: white; width: 100%; height: 100%">
            <el-button
              type="primary"
              style="float: right; margin-top: -10px; margin-right: 20px"
              @click="dialogFormVisible = true"
              >+新增工序行</el-button
            >
            <div style="margin: 20px">
              <el-table :data="operationLineData" style="width: 150%">
                <el-table-column prop="operationLineId" label="序号" />
                <el-table-column prop="serialNumber" label="顺序" />
                <el-table-column prop="processId" label="工序编号" />
                <!-- <el-table-column prop="processId" label="工序名称"/>
              <el-table-column prop="workCenterId" label="工作中心" /> -->
                <el-table-column prop="leadTime" label="	前置期" />
                <el-table-column
                  prop="labourPrice"
                  label="工价(元)"
                  style="width: 180px"
                />
                <el-table-column
                  prop="lostButton"
                  label="废扣工价(元)"
                  style="width: 180px"
                />
                <el-table-column
                  prop="handleTime"
                  label="创建时间"
                  style="width: 180px"
                >
                  <template #default="{ row }">
                    {{ moment(row.handleTime).format("YYYY-MM-DD HH:mm:ss") }}
                  </template>
                </el-table-column>
                <el-table-column prop="handle" label="创建人" />
                <el-table-column prop="operationStatus" label="状态">
                  <template #default="{ row }">
                    <el-text v-if="row.operationStatus == 0" type="success"
                      >启用</el-text
                    >
                    <el-text v-else type="danger">停用</el-text>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <el-dialog v-model="dialogFormVisible" title="工序行" width="500">
            <el-form
              ref="ruleFormRef"
              style="max-width: 600px"
              :model="ruleForm"
              :rules="rules"
              label-width="auto"
              class="demo-ruleForm"
              :size="formSize"
              status-icon
            >
              <el-form-item label="顺序" prop="serialNumber">
                <el-input v-model="ruleForm.serialNumber" />
              </el-form-item>
              <el-form-item label="工序" prop="processId">
                <el-select
                  v-model="ruleForm.processId"
                  placeholder="请选择工序"
                >
                  <el-option
                    v-for="item in ProcessList"
                    :label="item.processName"
                    :value="item.processId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="工作中心" prop="workCenterId">
                <el-select
                  v-model="ruleForm.workCenterId"
                  placeholder="请选择工作中心"
                >
                  <el-option
                    v-for="item in WorkCenterList"
                    :label="item.workCenterName"
                    :value="item.workCenterId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="前置期" prop="leadTime">
                <el-input v-model="ruleForm.leadTime" />
              </el-form-item>
              <el-form-item label="工价(元)" prop="labourPrice">
                <el-input v-model="ruleForm.labourPrice" />
              </el-form-item>
              <el-form-item label="废扣工价(元)" prop="lostButton">
                <el-input v-model="ruleForm.lostButton" />
              </el-form-item>
              <el-form-item label="摘要" prop="abstract">
                <el-input v-model="ruleForm.abstract" />
              </el-form-item>
              <el-form-item label="状态" prop="operationStatus">
                <el-radio-group v-model="ruleForm.operationStatus">
                  <el-radio :value="false">启用</el-radio>
                  <el-radio :value="true">停用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="AddoperationLine">
                  添加
                </el-button>
              </div>
            </template>
          </el-dialog>
        </el-tab-pane>
      </el-tabs>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted, readonly } from "vue";
import axios from "axios";
const apiurl = import.meta.env.VITE_APP_API_URL_ProductionAdd;
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
const apiurl1 = import.meta.env.VITE_APP_API_URL_ProductionShow;
const apiUri=import.meta.env.VITE_APP_API_URL_WAREHOUSE;
const dialogFormVisible = ref(false);
import { useRouter } from "vue-router";
import moment from "moment";
const router = useRouter();
interface RuleForm {
  processRouteId: number;
  processRouteNo: string;
  processRouteName: string;
  processVersion: string;
  processDescription: string;
  inventoryInfoId: string;
  processRouteStatus: boolean;
  processRouteApproval: number;
  handle: string;
  handleContext: string;
  // handleTime:Date
  pid: number;
  isDelete: boolean;
  operationLineId: number;
  serialNumber: string;
  processId: string;
  workCenterId: string;
  leadTime: string;
  labourPrice: string;
  lostButton: string;
  abstract: string;
  operationStatus: boolean;
}

const formSize = ref<ComponentSize>("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  processRouteId: 0,
  processRouteNo: "",
  processRouteName: "",
  processVersion: "",
  processDescription: "",
  inventoryInfoId: "",
  processRouteStatus: false,
  processRouteApproval: 1,
  handle: "",
  handleContext: "工艺路线添加",
  pid: 0,
  isDelete: false,
  operationLineId: 0,
  serialNumber: "",
  processId: "",
  workCenterId: "",
  leadTime: "",
  labourPrice: "",
  lostButton: "",
  abstract: "",
  operationStatus: false,
});

//获取登录信息
const UserList = ref([]);
const LoadUserJSONData = () => {
  //读出数据
  const value = localStorage.getItem("userInfo");
  //反序列化JSON字符串
  UserList.value = JSON.parse(value);
  UserList.value.forEach((item: any) => {
    ruleForm.handle = item.userName;
    UserLogData.Handle = item.userName;
  });
};
const UserLogData=reactive({
UserLogId :0,
Handle :'张三',
HandleContext:'添加工艺路线', 
Pid :1,
IsDelete:false
})

//添加日志
const AddUserLogData=()=>{
  axios.post(apiUri+"/api/UserLog/AddUserLogData",{
  UserLogId :UserLogData.UserLogId,
  Handle :UserLogData.Handle,
  HandleContext:UserLogData.HandleContext,
  Pid :UserLogData.Pid,
  IsDelete:UserLogData.IsDelete
  }).then(res=>{
    if(res.data.code>0)
    {
      ElMessage.success('添加成功');
    }
    else
    {
      ElMessage.error('添加失败');
    }
  })
}

//表单验证
const rules = reactive<FormRules<RuleForm>>({
  processRouteNo: [
    { required: true, message: "请输入工艺编码", trigger: "blur" },
  ],
  processRouteName: [
    { required: true, message: "请输入工艺名称", trigger: "blur" },
  ],
  processVersion: [
    { required: true, message: "请输入工艺版本", trigger: "blur" },
  ],
  processDescription: [
    { required: true, message: "请输入工艺描述", trigger: "blur" },
  ],
  inventoryInfoId: [{ required: true, message: "请选择物料", trigger: "blur" }],
  processRouteStatus: [
    { required: true, message: "请选择状态", trigger: "blur" },
  ],
  serialNumber: [{ required: true, message: "必填", trigger: "blur" }],
  processId: [{ required: true, message: "必填", trigger: "blur" }],
  workCenterId: [{ required: true, message: "必填", trigger: "blur" }],
  leadTime: [{ required: true, message: "必填", trigger: "blur" }],
  labourPrice: [{ required: true, message: "必填", trigger: "blur" }],
  lostButton: [{ required: true, message: "必填", trigger: "blur" }],
});

//物料下拉
const ItemInfoList: any = ref([]);
const getItemInfoList = () => {
  axios
    .post(apiurl1 + "/api/ShowProducManagement/ShowItemInfo",{})
    .then((res) => {
      console.log(res);
      ItemInfoList.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
//工序下拉
const ProcessList: any = ref([]);
const getProcessList = () => {
  axios
    .post(apiurl1 + "/api/ShowProducManagement/ProcessShow", {})
    .then((res) => {
      console.log(res);
      ProcessList.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
//工作中心下拉
const WorkCenterList: any = ref([]);
const getWorkCenterList = () => {
  axios
    .post(apiurl1 + "/api/ShowProducManagement/WorkCenterShow", {})
    .then((res) => {
      console.log(res);
      WorkCenterList.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};

//点击保存进行下一步操作
const GetAdd = () => {
  if(ruleForm.processRouteNo == ''){
    return ElMessage.error('请先完善工艺路线信息再提交');
  }
  isshow.value = true;
  isno.value = true;
};

//显示提交按钮
const isshow = ref(false);
//工作中心编码是否只读
const isno = ref(false);
const Wenzi = ref("提交 >");
//添加工艺路线
const AddProcessRoute = () => {
  const data = {
    processRouteId: 0,
    processRouteNo: ruleForm.processRouteNo,
    processRouteName: ruleForm.processRouteName,
    processVersion: ruleForm.processVersion,
    processDescription: ruleForm.processDescription,
    inventoryInfoId: ruleForm.inventoryInfoId,
    processRouteStatus: ruleForm.processRouteStatus,
    processRouteApproval: ruleForm.processRouteApproval,
    handle: ruleForm.handle,
    handleContext: ruleForm.handleContext,
    pid: ruleForm.pid,
    isDelete: ruleForm.isDelete,
    operationLineList: operationLineData.value,
  };
  console.log(data);
  axios
    .post(apiurl + "/api/ProducManagement/AddProcessRoute", data)
    .then((res) => {
      console.log(res);
      AddUserLogData()
      ElMessage.success("添加成功");
      // router.push('/ProducManagement/ProcessRouteQuery')
    });
};

//添加工序行的行信息 暂存到数组里
const operationLineData: any = ref([]);
const IdNo = ref(0);
//行信息添加
const AddoperationLine = () => {
  IdNo.value = IdNo.value + 1;
  const data = {
    operationLineId: IdNo.value,
    serialNumber: ruleForm.serialNumber,
    processId: ruleForm.processId,
    workCenterId: ruleForm.workCenterId,
    leadTime: ruleForm.leadTime,
    labourPrice: ruleForm.labourPrice,
    lostButton: ruleForm.lostButton,
    abstract: ruleForm.abstract,
    operationStatus: ruleForm.operationStatus,
    processRouteId: ruleForm.processRouteId,
    isDelete: ruleForm.isDelete,
    handle: ruleForm.handle,
    handleContext: ruleForm.handleContext,
    pid: ruleForm.pid,
  };
  console.log(data, "123");
  dialogFormVisible.value = false;
  //operationLineData.value = Object.values(data);
  operationLineData.value.push(data);
  console.log(operationLineData.value, "123");
};

//钩子函数
onMounted(() => {
  getItemInfoList();
  getProcessList();
  getWorkCenterList();
  LoadUserJSONData()
  //  if(ruleForm.processRouteId!=0){
  //   GetData();
  //  }
  // operationLineData.value = [];
});
</script>

<style scoped>
.scrollbar-flex-content {
  display: flex;
}
.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}
</style>
